import React from 'react';

import Header from '../common/Header';
import CKModal from '../components/CKModal';
import Validate from '../common/Validate';
import moment from 'moment';
import AMUIReact,{
    Container,
    Button,
    Input,
    Form,
    Icon,
    Selected,
    Grid,
    Col
} from 'amazeui-react';

import Fetch from '../common/Fetch';

import "../assets/css/manage/blog.less";

class BlogCategoryEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:{
                ctg_name:'',
                ctg_number:0,
                created_date:moment().unix(),
                modified_date:moment().unix()
            },
            is_save:false,
            type:this.props.params.id ? 'edit':'add'
        };
    }

    componentDidMount() {
        if (this.state.type === 'edit') {
            this.loadData();
        }
    }

    loadData() {
        this._modal.load('正在加载数据...');
        Fetch('/res/blog_category/get',{id:this.props.params.id},(res)=>{
            if (res.status) {
                var data = this.state.data;
                $.map(data,(item,key)=>{
                    data[key] = res.data[key];
                });
                this.setState({
                    data:data,
                    t_id:res.data.t_id
                });
                this._modal.closeModal();
            } else {
                this._modal.alert('提示','加载数据出错',()=>{
                    this.context.router.push('/blog_category');
                    return true;
                });
            }
        },()=>{
            this._modal.closeModal();
        });
    }

    save = ()=>{
        var data = this.checkData();
        if (data === false) return;
        if (this.state.is_save) return;
        this.setState({
            is_save:true
        });
        this._modal.load('正在保存数据...');
        Fetch('/res/blog_category/save',data,(res)=>{
            if (res.status) {
                this._modal.alert('成功','保存数据成功!',()=>{
                    this.context.router.push('/blog_category');
                });
            } else {
                this._modal.alert('失败','保存失败!!');
                this.setState({
                    is_save:false
                });
            }
        },()=>{
            this._modal.alert('失败','远程调用失败!!');
            this.setState({
                is_save:false
            });
        });
    };

    checkData() {
        var valid = {
            'ctg_name':{role:'s2-20',errmsg:'分类名称为2到20个字符'}
        };
        var data = this.state.data;
        if (this.state.type == 'edit') {
            data['ctg_id'] = this.props.params.id;
        }
        try {
            Validate.inst().checkData(data,valid);
            return data;
        } catch (e) {
            this._modal.alert('错误',e);
            return false;
        }
    }

    changeHandler(field){
        return (e)=>{
            var info = this.state.data;
            info[field] = e.target.value;
            this.setState({data:info});
        }
    }

    render() {
        let data = this.state.data;
        return (
            <div className="content">
                <Header title={this.state.type === 'add' ? "新增博客分类":'修改博客分类'} back/>
                <div className="content_main">
                    <div style={{marginBottom:'20px'}}>
                        <h4 className="title">博客分类信息</h4>
                    </div>
                    <Form ref="from" horizontal style={{marginTop:'20px'}}>
                        <Input label="分类名"
                               labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_name || ''}
                               onChange={this.changeHandler('ctg_name')}
                               vali="s6-20"
                               placeholder="分类名为2到20个字符"
                        />
                        <Input label="文章数"
                               labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={data.ctg_number}
                               disabled
                        />
                        <Input label="创建时间" labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={moment.unix(data.created_date).format('YYYY-MM-DD HH:mm:ss')}
                               disabled
                        />
                        <Input label="修改时间" labelClassName="am-u-sm-2"
                               wrapperClassName="am-u-sm-4 am-u-end"
                               value={moment.unix(data.modified_date).format('YYYY-MM-DD HH:mm:ss')}
                               disabled
                        />
                    </Form>
                    <div className="am-form-group">
                        <div className="am-u-sm-2">
                            &nbsp;
                        </div>
                        <div className="am-u-sm-4 am-u-end">
                            <Button amStyle="primary"
                                    onClick={this.save}
                                    disabled={this.state.is_save}
                            >
                                {this.state.is_save?'保存中...':'保存'}
                            </Button>
                        </div>
                    </div>
                </div>
                <CKModal ref={(c) => this._modal = c}/>
            </div>
        );
    }
}

BlogCategoryEdit.contextTypes = {
    router: React.PropTypes.object
};

export default BlogCategoryEdit;